import { Navigate } from 'react-router-dom'
import React, { lazy } from 'react'
// import HomeView from '@/views/HomeView'
// import AboutView from '@/views/AboutView'
import Login from '@/views/Login'

const Home = lazy(() => import('@/views/HomeView'))
const Page3 = lazy(() => import('@/views/Page3'))
const Page4 = lazy(() => import('@/views/Page4'))
const Page5 = lazy(() => import('@/views/Page5'))
const Page6 = lazy(() => import('@/views/Page6'))
const Page7 = lazy(() => import('@/views/Page7'))
const Page8 = lazy(() => import('@/views/Page8'))

// 创建异步组件
const withLoadingComponent = (comp: JSX.Element) => (
    <React.Suspense fallback={<div>Loading...</div>}>
        {comp}    
    </React.Suspense>
)

const routes = [
    {
        path: '/',
        element: <Navigate to={'/login'} /> // 重定向
    },
    // 登录页
    {
        path: '/login',
        element: <Login />
    },
    // 嵌套路由
    {
        path: '/',
        element: withLoadingComponent(<Home />),
        children: [
            {
                path: '/sub1/page3',
                element: withLoadingComponent(<Page3 />),
            },
            {
                path: '/sub1/page4',
                element: withLoadingComponent(<Page4 />),
            },
            {
                path: '/sub1/page5',
                element: withLoadingComponent(<Page5 />),
            },
            {
                path: '/sub2/page6',
                element: withLoadingComponent(<Page6 />),
            },
            {
                path: '/sub2/page7',
                element: withLoadingComponent(<Page7 />),
            },
            {
                path: '/page8',
                element: withLoadingComponent(<Page8 />),
            },
        ]
    },
]

export default routes